<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="80px" @submit.native.prevent>
      <el-form-item label="名称" prop="name">
        <el-input v-model="pram.name" maxlength="150" placeholder="名称" />
      </el-form-item>
      <el-form-item label="政治面貌" prop="political">
        <el-input v-model="pram.political" maxlength="150" placeholder="政治面貌" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-input v-model="pram.gender" maxlength="150" placeholder="性别" />
      </el-form-item>
      <el-form-item label="职务" prop="position">
        <el-input v-model="pram.position" maxlength="150" placeholder="职务" />
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="pram.category" placeholder="分类" clearable style="width: 100%">
          <el-option
            v-for="(item,index) in categoryList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="照片" prop="photo">
        <div class="upLoadPicBox" @click="modalPicTap()">
          <div v-if="pram.photo" class="pictrue"><img :src="pram.photo"></div>
          <div v-else class="upLoad pictrue">
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:represent:save']">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {saveRepresent} from '@/api/represent'
import {Debounce} from '@/utils/validate'
export default {
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allCategoryData: {
      type: Array
    },
  },
  data() {
    return {
      constants:this.$constants,
      pram: {
        id: 0,
        name:'',
        political:'',
        category:null,
        gender:'',
        photo:'',
        position:''
      },
      rules: {
        name: [{ required: true, message: '请填姓名', trigger: ['blur', 'change'] }],
        gender: [{ required: true, message: '请填性别', trigger: ['blur', 'change'] }],
        position: [{ required: true, message: '请填职务', trigger: ['blur', 'change'] }],
        category: [{ required: true, message: '请选择类型', trigger: ['blur', 'change'] }],
        photo: [{ required: true, message: '请上传照片', trigger: ['blur', 'change'] }],
      },

      categoryList:[],
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    // 点击图标
    modalPicTap (i,status) {
      const _this = this;
      this.$modalUpload(function(img) {
        _this.pram.photo = img[0].att_dir
      },'1', 'content')
    },
    initEditData() {
      this.categoryList = this.allCategoryData

      if (this.isCreate !== 1) return //编辑
      const {id,name,political,category,photo,position,gender } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.id = id;
      this.pram.name=name;
      this.pram.political=political;
      this.pram.gender=gender;
      this.pram.category=category;
      this.pram.photo=photo;
      this.pram.position=position;
    },

    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid)return;
        saveRepresent(this.pram).then(()=>{
          this.$message.success('操作成功');
          this.$emit('hideEditDialog')
        })
      })
    }),
  }
}
</script>

<style scoped lang="scss">
.pictrue{
  width: 150px;
  height: 150px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.rich-content{
  width:99%;
  ::v-deep.el-form-item__content{
    margin-left:10px!important;
  }
}
</style>
